<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";

const dataSource = ref([
  {
    key: "1",
    name: "xxxx",
    phone: "xxxx",
    job: "xxxx",
    wx: "xxxxxxxx",
    mail: "xxxxxxxx",
    qq: "xxxxxxxx",
  },
]);

const columns = ref([
  {
    title: "联系人",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "职务",
    dataIndex: "job",
    key: "job",
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone",
  },
  {
    title: "微信",
    dataIndex: "wx",
    key: "wx",
  },
  {
    title: "QQ",
    dataIndex: "qq",
    key: "qq",
  },
  {
    title: "邮箱",
    dataIndex: "mail",
    key: "mail",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);

const open = ref<boolean>(false);

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

const form = ref({
  name: "",
});
</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="联系人管理">
      <a-button type="primary" class="mb-5" @click="open = true">
        新增联系人
      </a-button>
      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns" />
    </ProductBox>
  </div>

  <a-modal v-model:open="open" title="新增联系人" @ok="handleOk">
    <el-form class="mt-5" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="微信">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="QQ">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
  </a-modal>
</template>
<style lang="scss" scoped></style>
